<template>
  <!-- 头部导航栏 -->
  <view class="navbar" :style="{ paddingTop: menu.top + 'px' }">
    <text class="title">我要卖房</text>
  </view>
  <scroll-view class="scroll-view" scroll-y>
    <view class="wrapper">
      <image src="http://xcxtp.njmswl.com/images/sellHouse.png" class="hireImg" />
      <view class="content">
        <view class="contentItem">
          <label for="houseName" class="houseNameText">小区名称</label>
          <input
            id="houseName"
            class="inputStyle"
            type="text"
            placeholder="请输入小区名称"
            placeholder-class="placeholderStyle"
            v-model="houseName"
          />
          <view class="line"></view>
        </view>
        <view class="contentItem">
          <label for="acceptPrice" class="houseNameText">理想价格</label>
          <input
            id="acceptPrice"
            class="inputStyle"
            type="text"
            placeholder="请输入"
            placeholder-class="placeholderStyle"
            v-model="acceptPrice"
          />
          <view class="unit">万元</view>
          <view class="line"></view>
        </view>
        <view class="contentItem">
          <label for="personName" class="houseNameText">如何称呼您</label>
          <input
            id="personName"
            class="inputStyle"
            type="text"
            placeholder="请输您的名字"
            placeholder-class="placeholderStyle"
            v-model="personName"
          />
          <view class="line"></view>
        </view>
        <view class="contentItem">
          <label for="personTel" class="houseNameText">联系方式</label>
          <input
            id="personTel"
            class="inputStyle"
            type="text"
            placeholder="请输入您的手机号码"
            placeholder-class="placeholderStyle"
            v-model="personTel"
          />
        </view>
      </view>
      <view class="send" @click="publish">立即发布</view>
      <view class="content1" @click="openMiniProgram">
        <image class="img" src="http://xcxtp.njmswl.com/images/index/shop.png" />
        <text class="openTitle">我也要开通小程序</text>
      </view>
      <view class="support"><text>技术支持：推量科技</text></view>
    </view>
  </scroll-view>
</template>
<script setup>
import openProgram from "../components/openProgram.vue";
import { getSellHouseAPI } from "@/services/sellHouse";
import { onLoad, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { ref } from "vue";
const menu = ref({});
const houseName = ref("");
const acceptPrice = ref("");
const personName = ref("");
const personTel = ref("");

const publish = async () => {
  if (!houseName.value) {
    uni.showToast({
      title: "请输入小区名称",
      icon: "none",
    });
  } else if (!acceptPrice.value) {
    uni.showToast({
      title: "请输入理想价格",
      icon: "none",
    });
  } else if (!personName.value) {
    uni.showToast({
      title: "请输入您的姓名",
      icon: "none",
    });
  } else if (!personTel.value) {
    uni.showToast({
      title: "请输入联系方式",
      icon: "none",
    });
  } else {
  //先获取userid
  const userId = uni.getStorageSync('appIdKey')
    const res = await getSellHouseAPI({
      id: userId,
      name: houseName.value,
      price: acceptPrice.value,
      appellation:personName.value,
      phone:personTel.value,
      sellType:1
    });
    if (res.code === 0) {
      uni.showToast({
        title: "发布成功！",
        icon: "success",
      });
    } else {
      uni.showToast({
        title: res.msg,
        icon: "error",
      });
    }
  }
};

// 请求出售房屋信息接口
// const getSellHouseData =async ()=>{
//  const res = await getSellHouseAPI({id:1})
//  if (res.code==0) {
//   console.log(res.data);
//  }
// }
// 开通小程序
const openMiniProgram = () => {
  uni.navigateTo({ url: "/pages/simplePage/openMiniProgram" });
};

onLoad(() => {
  menu.value = uni.getMenuButtonBoundingClientRect();
});
</script>
<style lang="scss">
page {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.scroll-view {
  flex: 1;
}
.navbar {
  margin-top: 8rpx;
  background-color: #fff;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 47rpx;
  .title {
    text-align: center;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 36rpx;
    color: #000000;
  }
}

.wrapper {
  position: relative;
  height: 100%;
  background-color: #f4f5fc;
  .hireImg {
    width: 100%;
    height: 373.3rpx;
  }
  .content {
    position: absolute;
    top: 284rpx;
    margin-left: 27rpx;
    width: 694rpx;
    height: 440rpx;
    background: #ffffff;
    border-radius: 25rpx;
    .contentItem {
      display: flex;
      align-items: center;
      position: relative;
      width: 100%;
      height: 109rpx;
      padding-left: 25rpx;
      padding-right: 24rpx;
      // line-height: 109rpx;

      .line {
        position: absolute;
        width: 646rpx;
        height: 1rpx;
        bottom: 0;
        border-bottom: 1rpx solid rgba(229, 229, 229, 0.75);
      }
      .houseNameText {
        width: 170rpx;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }
      .inputStyle {
        padding: 0;
        margin: 0;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
      }
      .placeholderStyle {
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #989999;
      }
      .unit {
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #000000;
        margin-left: 100rpx;
      }
    }
  }
  .send {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 770rpx;
    margin-left: 27rpx;
    width: 695rpx;
    height: 100rpx;
    background: #3bc48c;
    border-radius: 50rpx;

    font-family: PingFang SC;
    font-weight: 500;
    font-size: 30rpx;
    color: #ffffff;
  }

  .content1 {
    position: absolute;
    top: 912rpx;
    left: 50%;
    transform: translate(-50%, 0%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 261rpx;
    height: 61rpx;
    margin-bottom: 21rpx;
    background: #3bc48c;
    border-radius: 30rpx;
    .img {
      width: 28rpx;
      height: 26rpx;
    }
    .openTitle {
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
    }
  }
  .support {
    position: absolute;
    top: 994rpx;
    left: 50%;
    transform: translate(-50%, 0%);
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 24rpx;
    color: #000000;
  }
}
</style>
